<template>
    <div>
        <div>
            <el-row>
                <el-col :span="12">
                    <img :src="'http://localhost:5216/' + detailObj.imgs[0].imgPath" />



                    <div>
                        <el-carousel :interval="4000" type="card" height="200px">
                            <el-carousel-item v-for="(item, key) in detailObj.imgs" :key="key">
                                <h3 class="medium"><img :src="'http://localhost:5216/' + item.imgPath" /></h3>
                            </el-carousel-item>
                        </el-carousel>
                    </div>


                </el-col>
                <el-col :span="12">
                    <div>{{ detailObj.name }}</div>
                    <div>{{ detailObj.price }}</div>
                    <div>
                        <el-button type="danger">加入购物车</el-button>
                        <el-button>立即购买</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="商品详情" name="first">
                    <div>afadfsfsadfdasfas</div><div>afadfsfsadfdasfas</div><div>afadfsfsadfdasfas</div><div>afadfsfsadfdasfas</div><div>afadfsfsadfdasfas</div>
                </el-tab-pane>
                <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
            </el-tabs>
        </div>
        <div style="min-height:300px;"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'first',
            id: this.$route.query.aaaaaaaaaaaaaaaaaid,
            detailObj: {
                name: undefined,
                price: undefined,
                imgs: [
                    { imgPath: '' }
                ]
            }
        }
    },
    mounted() {
        this.onLoadData()
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        onLoadData() {
            let url = 'http://localhost:5216/goods/single?id=' + this.id
            this.$http.get(url).then(res => {
                console.log(res)
                this.detailObj = res.data.data[0]
            })
        }
    }
}
</script>


<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>